<template>
  <div>
    <div>
      <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="nubmer"
          label="人数">
        </el-table-column>
        <el-table-column
          prop="big"
          label="大">
        </el-table-column>
        <el-table-column
          prop="small"
          label="小">
        </el-table-column>
        <el-table-column
          prop="hei"
          label="黑">
        </el-table-column>
        <el-table-column
          prop="hong"
          label="红">
        </el-table-column>
        <el-table-column
          prop="mei"
          label="梅">
        </el-table-column>
        <el-table-column
          prop="fang"
          label="方">
        </el-table-column>
        <el-table-column
          prop="seven"
          label="7">
        </el-table-column>
        <el-table-column
          prop="serviceCharge"
          label="手续">
        </el-table-column>
        <el-table-column
          prop="reversion"
          label="回收">
        </el-table-column>
      </el-table>
    </div>

    <el-divider content-position="center">下注情况</el-divider>
    <div>
      <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item>
          <div class="demo-image__placeholder">
            <div class="block">
              <el-image v-for="(url,index) in urls" :key="url" :src="url" lazy @click="imageClick(index)">
                <div slot="placeholder" class="image-slot">
                  加载中<span class="dot">...</span>
                </div>
              </el-image>
            </div>
          </div>
        </el-form-item>
        <hr>
        <div class="demo-image__placeholder">
          <div class="block">
            <el-image :src="url">
              <div slot="placeholder" class="image-slot">
                加载中<span class="dot">...</span>
              </div>
            </el-image>
          </div>
        </div>
        <hr>
        <el-form-item>
          <el-button type="primary" icon="el-icon-video-play" @click="onSubmit">提交出牌控制</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import card1 from '@/assets/card/1.png'
  import card2 from '@/assets/card/2.png'
  import card3 from '@/assets/card/3.png'
  import card4 from '@/assets/card/4.png'
  import card5 from '@/assets/card/5.png'
  import card6 from '@/assets/card/6.png'
  import card7 from '@/assets/card/7.png'
  import card8 from '@/assets/card/8.png'
  import card9 from '@/assets/card/9.png'
  import card10 from '@/assets/card/10.png'
  import card11 from '@/assets/card/11.png'
  import card12 from '@/assets/card/12.png'
  import card13 from '@/assets/card/13.png'
  import card14 from '@/assets/card/14.png'
  import card15 from '@/assets/card/15.png'
  import card16 from '@/assets/card/16.png'
  import card17 from '@/assets/card/17.png'
  import card18 from '@/assets/card/18.png'
  import card19 from '@/assets/card/19.png'
  import card20 from '@/assets/card/20.png'
  import card21 from '@/assets/card/21.png'
  import card22 from '@/assets/card/22.png'
  import card23 from '@/assets/card/23.png'
  import card24 from '@/assets/card/24.png'
  import card25 from '@/assets/card/25.png'
  import card26 from '@/assets/card/26.png'
  import card27 from '@/assets/card/27.png'
  import card28 from '@/assets/card/28.png'
  import card29 from '@/assets/card/29.png'
  import card30 from '@/assets/card/30.png'
  import card31 from '@/assets/card/31.png'
  import card32 from '@/assets/card/32.png'
  import card33 from '@/assets/card/33.png'
  import card34 from '@/assets/card/34.png'
  import card35 from '@/assets/card/35.png'
  import card36 from '@/assets/card/36.png'
  import card37 from '@/assets/card/37.png'
  import card38 from '@/assets/card/38.png'
  import card39 from '@/assets/card/39.png'
  import card40 from '@/assets/card/40.png'
  import card41 from '@/assets/card/41.png'
  import card42 from '@/assets/card/42.png'
  import card43 from '@/assets/card/43.png'
  import card44 from '@/assets/card/44.png'
  import card45 from '@/assets/card/45.png'
  import card46 from '@/assets/card/46.png'
  import card47 from '@/assets/card/47.png'
  import card48 from '@/assets/card/48.png'
  import card49 from '@/assets/card/49.png'
  import card50 from '@/assets/card/50.png'
  import card51 from '@/assets/card/51.png'
  import card52 from '@/assets/card/52.png'
  export default {
    created(){
      axios.get("/jdsslscene").then(resp => {
        if(resp.data.result){
          this.tableData = [resp.data.msg]
        }
      })
    },
    data() {
      return {
        tableData: [],
        formData: {
          cardId: ''
        },
        url:card1,
        urls: [
          card1,card2,card3,card4,card5,card6,card7,card8,card9,card10,card11,card12,card13,card14,card15,card16,card17,card18,card19,card20,card21,card22,card23,card24,card25,card26,card27,card28,card29,card30
          ,card31,card32,card33,card34,card35,card36,card37,card38,card39,card40,card41,card42,card43,card44,card45,card46,card47,card48,card49,card50,card51,card52
        ],
      }
    },
    methods: {
      imageClick(index){
        this.url = this.urls[index]
        this.formData.cardId = index + 1
      },
      onSubmit() {
        console.log(this.formData.cardId)
      }
    }
  }
</script>

<style scoped>

</style>
